<template>
  <div id="view">
    <div id="form">
      <div class="curStep step1">
        <p class="p1">重置密码</p>
        <p class="p2 oneCl">
          <span class="country hoverhand" @click="showCountry">+{{area_code}}</span>
          <input type="number" placeholder="账号" v-model="mobile">
        </p>
        <p class="p3 oneCl">
          <input type="number" placeholder="验证码" v-model="code">
          <button id="getCode">
            <tongdun-Countdown  @run="sendCode" @getTdToken="getTdToken" wt='' hg='50px'
                                verfityMobile='true' ref="tdEle" beginMsg="获取验证码" refreshMsg="重新获取" timeout="1000" endtime="60"/>
          </button>
        </p>
        <p class="p4 oneCl">
          <input type="password" placeholder="新密码" v-model="newPws1">
        </p>
        <p class="p5 oneCl">
          <input type="password" placeholder="确认密码" v-model="newPws2">
        </p>
        <p class="p6 oneCl subBox">
          <button class="sub" @click="submit">提 交</button>
        </p>
      </div>
    </div>
    <select-country ref="selCountry" @chosed="selectedCountry"/>
  </div>
</template>
<script>
  import {getMbCode, resetPws , getAreaCode , postLogout} from "../http/api";
  import store from "../store/store";
  export default {
    name : 'forgetLoginPws',
    data(){
      return{
        yzm_token : null ,
        blackBox : null,
        curStep : 1,
        mobile : '',//手机号
        code : '',//手机验证码
        newPws1 : '',//密码1
        newPws2 : '',//密码2
        inviter_uid : '',//inviter_uid
        country_id : '',//国家id
        area_code: '',//区域id
        selected_country : '',//选择的国家
        countrys : [], //国家列表
      }
    },
    components:{
      SelectCountry : resolve => { require(['../components/sel_country'], resolve) }, /*选择国家*/
      tongdunCountdown: resolve => { require(['../components/tongdunCountdown'], resolve) },//同盾倒计时功能插件
    },
    watch:{
      mobile : function () {
        this.$refs.tdEle.getMobile(this.mobile);
      }
    },
    methods:{
      sendCode() {
        //发送验证码
        let thiz = this ;
        if(!thiz.mobile){
          require('../common/js/toast').toast('请输入手机号');
        }else if(thiz.$refs.tdEle.interval != null){
          require('../common/js/toast').toast('请勿重复点击^_^');
        }else{
          let param = {
            blackBox: thiz.blackBox ,
            yzm_token: thiz.yzm_token,
            mobile: thiz.mobile,
            area_code: thiz.area_code,
            country_id:thiz.country_id ,
            type : 'forgetPwd'
          };
          getMbCode(param).then(function (res) {
            if( res.code == 200){
              thiz.$refs.tdEle.begin();
              require('../common/js/toast').toast('验证码已发送至您的手机');
              thiz.isSendCode = true;
            }else{
              thiz.$refs.tdEle.resetTd();
            }
          })
        }
      },
      getTdToken(){
        //获取同盾token
        let thiz = this;
        thiz.$refs.tdEle.getTdToken(function (res) {
          thiz.yzm_token = res.yzm_token;
          thiz.blackBox = res.blackBox;
          if( thiz.mobile ){
            thiz.sendCode()
          }
        })
      },
      selectedCountry( curCountry ){
        let item = curCountry.item;
        this.selected_country = item;
        this.area_code = item.area_code;
        this.country_id = item.id;
      },
      showCountry(){
        let thiz = this;
        thiz.$refs.selCountry.getAreaList(thiz.countrys);
      },
      submit(){
        let thiz = this;
        let info = null;
        if( !thiz.mobile){
          info = '请输入账号';
        }else if( !thiz.code){
          info = '请输入验证码';
        }else  if( !thiz.newPws1){
          info = '请输入密码';
        }else if( !thiz.newPws2){
          info = '请输入确认密码';
        }else if( thiz.newPws1 != thiz.newPws2){
          info = '两次密码输入不一致';
        }
        if( info ){
          require('../common/js/toast').toast(info);
          info = null;
        }else{
          let params = {
            phone: thiz.mobile, area_code: thiz.area_code, password: thiz.newPws1, smscode: thiz.code
          };
          resetPws(params).then(res => {
            if (res.code == 200) {
              postLogout({noToast:true}).then(res2 => {
                if( res2.code == 200 ){
                  require('../common/js/toast').toast('修改密码成功!');
                  this.$store.commit('storageRemove', 'all'); //删除所有storage
                  this.$store.commit('reloadHeader' , true); //重新拉取头部js
                  thiz.$router.push({path: '/login', query: {mobile: thiz.mobile, area_code: thiz.area_code}});
                }
              });
            }
          });
        }
      }
    },
    mounted() {
      let thiz = this;
      getAreaCode().then(res => {
        thiz.countrys = res.data.country;
        thiz.area_code = thiz.countrys[0].area_code;
        thiz.country_id = thiz.countrys[0].id;
        thiz.selected_country = thiz.countrys[0];
      })
    }
  }
</script>
<style lang="less" scoped>
  @import "../common/style/common";
  @import "../common/style/public.css";
  #view{
    padding-top: 72px;padding-bottom: 158px;
  }
/*  .steps{
    font-size: 0;.colorGrey();text-align: center;padding-top: 117px;
    >.oneStep{
      padding-right: 140px;position: relative;display: inline-block;margin-right: 12px;
      &:after{
        content: '';display: inline-block;width: 125px;height: 1px;background: #DDDCDC;
        position: absolute;right: 0;top: 50%;
      }
      >span{
        font-size: 16px;
      }
      >.stepNum{
        width: 17px;height: 17px;border-radius: 50%;font-size: 14px;text-align: center;line-height: 17px;.border99();
        display: inline-block;margin-right: 7px;
      }
      >.stepNum:last-child{
        margin-right: 0;
      }
    }
    >.isHere{
      >span{
        color: #262626;
      }
      >.stepNum{
        .colorYellow;.borderYellow;
      }
    }
  }*/
  #form{
    .bgFFF;.borderRadius;margin:auto;margin-top: 71px;width: 450px;padding: 53px 50px;.boxShadow;
    .oneCl{
      padding-top: 30px;
    }
    input{
      .input();.placeholder(14px);font-size: 14px;
    }
    .subBox{
      padding-top: 52px;
      button{
        .submit(50px);
      }
    }
    .step1{
      .p1{
        color: #262626;font-size: 24px;padding-bottom: 50px;
      }
      .p2{
        padding-top: 0;overflow: hidden;border: 1px solid#EEEEEE;height: 50px;.borderRadius();border: 0;
        .country{
          background: #F1EEEE;text-align: center;color: #999999;font-family: 'MicrosoftYaHei';
          float: left;display: inline-block;width: 60px;height: 100%;line-height: 50px;font-size: 14px;
          .borderRadius();border-top-right-radius: 0;border-bottom-right-radius: 0;
        }
        input{
          width: calc(100% - 60px);float: left;border: 0;height: 100%;
          .border;border-top-left-radius: 0;border-bottom-left-radius: 0;
        }
      }
      .p3{
        padding-top: 30px;.overHidden;
        button{
          .submit(50px);width: 123px;float: right;position: relative;
          /deep/ span{
            >span{
              line-height: 50px;font-size: 16px;
            }
          }
        }
        input{
          width: 219px;float:left;
        }
      }
    }
  }
</style>
